<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
   <head>
      <title>floatz - Test page for simple forms</title>
      <meta http-equiv="content-type" content="text/html; CHARSET=utf-8" />
      <meta http-equiv="content-script-type" content="text/javascript" />
      <meta http-equiv="content-style-type" content="text/css" />
      <meta http-equiv="content-language" content="en" />
      <meta name="author" content="" />
      <meta name="robots" content="index,follow" />
      <meta name="description" content="" />
      <!-- for testing shrinked version -->
      <link rel="stylesheet" type="text/css" href="../../floatz/floatz.fixed.css" />
      <!-- <link rel="stylesheet" type="text/css" href="../../floatz/floatz.liquid.css" /> -->
      <!-- for testing development version -->
      <!-- <link rel="stylesheet" type="text/css" href="../src/floatz.layout.fixed.css" /> -->
      <!-- <link rel="stylesheet" type="text/css" href="../src/floatz.layout.liquid.css" /> -->
      <!-- <link rel="stylesheet" type="text/css" href="../src/debug/floatz.layout.debug.css" /> -->
      <style type="text/css">
      </style>
   </head>
   <body>
      <!-- page container -->
      <div id="flz_page">
         <div class="flz_box">
            <div class="flz_spacer">
               <form class="flz_form" action="" method="post">
                  <fieldset id="fieldset1">
                     <legend>Textbox Samples</legend>
                     <label for="textbox1">Textbox</label>
                     <input id="textbox1" class="flz_textbox" type="text" value="Lorem ipsum dolor sit amed" />
                     <label for="textbox2">Mandatory Textbox*</label>
                     <input id="textbox2" class="flz_textbox flz_mandatory" type="text" value="Lorem ipsum dolor sit amed" />
                     <label for="textbox3">Readonly Textbox</label>
                     <input id="textbox3" class="flz_textbox flz_readonly" type="text" readonly="readonly" value="Lorem ipsum dolor sit amed" />
                  </fieldset>
                  <fieldset>
                     <legend>Combined Textbox and Image Samples</legend>
                     <div class="flz_box flz_relative">
                        <label for="textbox4">Textbox</label>
                        <div class="flz_combifield">
                           <input id="textbox4" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                        </div>
                        <a href="#"><img class="flz_combifield" src="images/datepicker.gif" alt=""/></a>
                     </div>
                     <div class="flz_box flz_relative">
                        <label for="textbox5">Mandatory Textbox</label>
                        <div class="flz_combifield">
                           <input id="textbox5" type="text" class="flz_textbox flz_mandatory" value="Lorem ipsum dolor sit amed" />
                        </div>
                        <a href="#"><img class="flz_combifield" src="images/datepicker.gif" alt=""/></a>
                     </div>
                     <div class="flz_box flz_relative">
                        <label for="textbox6">Readonly Textbox</label>
                        <div class="flz_combifield">
                           <input id="textbox6" type="text" class="flz_textbox flz_readonly" value="Lorem ipsum dolor sit amed" readonly="readonly" />
                        </div>
                        <img class="flz_combifield" src="images/datepicker_readonly.gif" alt=""/>
                     </div>
                  </fieldset>
                  <fieldset id="fieldset2">
                     <legend>Textarea Samples</legend>
                     <label for="textarea1">Textarea</label>
                     <textarea id="textarea1" cols="1" rows="3">Lorem ipsum dolor sit amed</textarea>
                     <label for="textarea2">Mandatory Textarea*</label>
                     <textarea id="textarea2" class="flz_mandatory" cols="1" rows="3">Lorem ipsum dolor sit amed</textarea>
                     <label for="textarea3">Readonly Textarea</label>
                     <textarea id="textarea3" class="flz_readonly" cols="1" rows="3" readonly="readonly">Lorem ipsum dolor sit amed</textarea>
                  </fieldset>
                  <fieldset id="fieldset3">
                     <legend>Selectbox Samples</legend>
                     <label for="selectbox1">Selectbox</label>
                     <select id="selectbox1">
                        <option>Choice 1</option>
                        <option selected="selected">Choice 2</option>
                        <option>Choice 3</option>
                     </select>
                     <label for="selectbox2">Mandatory Selectbox*</label>
                     <select id="selectbox2" class="flz_mandatory">
                        <option>Choice 1</option>
                        <option selected="selected">Choice 2</option>
                        <option>Choice 3</option>
                     </select>
                     <label for="selectbox3">Readonly Selectbox</label>
                     <select id="selectbox3" class="flz_readonly" disabled="disabled">
                        <option>Choice 1</option>
                        <option selected="selected">Choice 2</option>
                        <option>Choice 3</option>
                     </select>
                  </fieldset>
                  <fieldset id="fieldset4">
                     <legend>Multi Choice Selectbox Samples</legend>
                     <label for="selectbox4">Selectbox</label>
                     <select id="selectbox4" multiple="multiple">
                        <option>Choice 1</option>
                        <option selected="selected">Choice 2</option>
                        <option>Choice 3</option>
                     </select>
                     <label for="selectbox5">Mandatory Selectbox</label>
                     <select id="selectbox5" class="flz_mandatory" multiple="multiple">
                        <option>Choice 1</option>
                        <option selected="selected">Choice 2</option>
                        <option>Choice 3</option>
                     </select>
                     <label for="selectbox6">Readonly Selectbox</label>
                     <select id="selectbox6" class="flz_readonly" multiple="multiple" disabled="disabled">
                        <option>Choice 1</option>
                        <option selected="selected">Choice 2</option>
                        <option>Choice 3</option>
                     </select>
                  </fieldset>
                  <fieldset id="fieldset5">
                     <legend>Nested Selectbox Samples</legend>
                     <label for="selectbox7">Selectbox</label>
                     <select id="selectbox7">
                        <optgroup label="Group 1">
                           <option>Choice 1</option>
                           <option selected="selected">Choice 2</option>
                           <option>Choice 3</option>
                        </optgroup>
                        <optgroup label="Group 2">
                           <option>Choice 4</option>
                           <option>Choice 5</option>
                           <option>Choice 6</option>
                        </optgroup>
                     </select>
                     <label for="selectbox8">Mandatory Selectbox</label>
                     <select id="selectbox8" class="flz_mandatory">
                        <optgroup label="Group 1">
                           <option>Choice 1</option>
                           <option selected="selected">Choice 2</option>
                           <option>Choice 3</option>
                        </optgroup>
                        <optgroup label="Group 2">
                           <option>Choice 4</option>
                           <option>Choice 5</option>
                           <option>Choice 6</option>
                        </optgroup>
                     </select>
                     <label for="selectbox9">Readonly Selectbox</label>
                     <select id="selectbox9" class="flz_readonly" disabled="disabled">
                        <optgroup label="Group 1">
                           <option>Choice 1</option>
                           <option selected="selected">Choice 2</option>
                           <option>Choice 3</option>
                        </optgroup>
                        <optgroup label="Group 2">
                           <option>Choice 4</option>
                           <option>Choice 5</option>
                           <option>Choice 6</option>
                        </optgroup>
                     </select>
                  </fieldset>
                  <fieldset id="fieldset6">
                     <legend>Radiobutton Samples (Label left)</legend>
                     <label for="radiobutton1" class="flz_inline">RadioButton 1</label>
                     <input id="radiobutton1" type="radio" name="radiogroup1" />
                     <label for="radiobutton2" class="flz_inline">RadioButton 2</label>
                     <input id="radiobutton2" type="radio" name="radiogroup1" checked="checked" />
                     <label for="radiobutton3" class="flz_inline">Mandatory RadioButton</label>
                     <input id="radiobutton3" type="radio" class="flz_mandatory" name="radiogroup1" />
                     <label for="radiobutton4" class="flz_inline">Readonly RadioButton</label>
                     <input id="radiobutton4" type="radio" name="radiogroup1" disabled="disabled" />
                  </fieldset>
                  <fieldset id="fieldset8">
                     <legend>Radiobutton Samples (Label right)</legend>
                     <input id="radiobutton9" type="radio" name="radiogroup3" />
                     <label for="radiobutton9" class="flz_inline">RadioButton 1</label>
                     <input id="radiobutton10" type="radio" name="radiogroup3" checked="checked" />
                     <label for="radiobutton10" class="flz_inline">RadioButton 2</label>
                     <input id="radiobutton11" type="radio" class="flz_mandatory" name="radiogroup3" />
                     <label for="radiobutton11" class="flz_inline">Mandatory RadioButton</label>
                     <input id="radiobutton12" type="radio" class="flz_readonly" name="radiogroup3" disabled="disabled" />
                     <label for="radiobutton12" class="flz_inline">Readonly RadioButton</label>
                  </fieldset>
                  <fieldset id="fieldset9">
                     <legend>Checkbox Samples (Label left)</legend>
                     <label for="checkbox1" class="flz_inline">Checkbox 1</label>
                     <input id="checkbox1" type="checkbox" />
                     <label for="checkbox2" class="flz_inline">Checkbox 2</label>
                     <input id="checkbox2" type="checkbox" checked="checked" />
                     <label for="checkbox3" class="flz_inline">Mandatory Checkbox</label>
                     <input id="checkbox3" class="flz_mandatory" type="checkbox" />
                     <label for="checkbox4" class="flz_inline">Readonly Checkbox</label>
                     <input id="checkbox4" class="flz_readonly" type="checkbox" disabled="disabled" />
                  </fieldset>
                  <fieldset id="fieldset11">
                     <legend>Checkbox Samples (Label right)</legend>
                     <input id="checkbox9" type="checkbox" />
                     <label for="checkbox9" class="flz_inline">Checkbox 1</label>
                     <input id="checkbox10" type="checkbox" checked="checked" />
                     <label for="checkbox10" class="flz_inline">Checkbox 2</label>
                     <input id="checkbox11" class="flz_mandatory" type="checkbox" />
                     <label for="checkbox11" class="flz_inline">Mandatory Checkbox</label>
                     <input id="checkbox12" class="flz_readonly" type="checkbox" disabled="disabled" />
                     <label for="checkbox12" class="flz_inline">Readonly Checkbox</label>
                  </fieldset>
                  <input id="button1" class="flz_button" type="button" value="Button" />
                  <input id="button2" class="flz_button" type="button" value="Readonly Button" disabled="disabled" />
               </form>
            </div>
         </div>
      </div>
   </body>
</html> 
 